<template>
    <div>
        <div :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <el-alert style="margin-bottom:20px" title="统计我自己商品的出货量含Shopee,LAZADA" type="success" effect="dark" :closable="false">
            </el-alert>
            <el-form ref="queryParams" inline label-position="right" label-width="80px" v-model="queryParams">
                <el-form-item label="平台">
                    <el-radio-group v-model="queryParams.platform" size="small" @change="search" >
                        <el-radio-button  label="">全部</el-radio-button>
                        <el-radio-button  label="1">Shopee</el-radio-button>
                        <el-radio-button  label="2">Lazada</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="代发时间">
                    <el-date-picker @change="cbtime" v-model="others.createTime" type="daterange" align="right" unlink-panels range-separator="-" style="width: 220px" :start-placeholder="$t('开始日期')" size="small" value-format="yyyy-MM-dd" :end-placeholder="$t('结束日期')">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="订单时间">
                    <el-date-picker @change="cobtime" v-model="others.orderCreateTime" type="daterange" align="right" unlink-panels range-separator="-" style="width: 220px" :start-placeholder="$t('开始日期')" size="small" value-format="yyyy-MM-dd" :end-placeholder="$t('结束日期')">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商品名">
                    <el-input size="small" v-model="queryParams.productName" @keyup.enter.native="search()" placeholder="商品名" style="width: 160px" />
                </el-form-item>
                <el-form-item label="货号/规格">
                    <el-input size="small" v-model="queryParams.variationName" @keyup.enter.native="search()" placeholder="货号/规格" style="width: 160px" />
                </el-form-item>
                <el-form-item label="sku编码">
                    <el-input size="small" v-model="queryParams.skuCode" @keyup.enter.native="search()" placeholder="sku编码" style="width: 160px" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-on:click="search()" type="primary">{{$t('搜索')}}</el-button>
                    <el-button size="small" v-on:click="reset()">{{$t('重置')}}</el-button>
                </el-form-item>
            </el-form>
            <el-row :style="{marginBottom:'20px'}">
                <font color="#f00">{{$t("仓库筛选")}}：</font>
                <el-button :type="queryParams.warehouseId==null?'danger':'default'" :loading="loadingWarehouse" @click="fitlerWarehouse(null)" size="small">全部</el-button>
                <el-button size="small" v-for="ware in warehouses" :key="ware.id" :type="queryParams.warehouseId==ware.warehouseId?'success':'default'" @click="fitlerWarehouse(ware)">{{ware.warehouseName}}</el-button>
                <el-button type="danger" :loading="loadingWarehouse" @click="getWarehouses" size="small">获取仓库信息</el-button>
                <el-button size="small" type="success" style="float:right" @click="exportData">
                    导出Excel
                </el-button>
            </el-row>
            <el-table size="small" ref="tbProducts" :data="storageProducts" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="productName" label="商品名" width="140">
                </el-table-column>
                <el-table-column align="center" prop="variationName" label="属性名" width="140">
                </el-table-column>
                <el-table-column align="center" prop="skuCode" label="sku编码" width="140">
                </el-table-column>
                <el-table-column align="center" prop="sellCount" label="销售数量" width="140">
                </el-table-column>
                <el-table-column align="center" prop="stock" label="当前库存" width="120">
                </el-table-column>
                <el-table-column align="center" prop="preStock" label="在途" width="120">
                </el-table-column>
                <el-table-column align="center" prop="purchaseStock" label="采购" width="120">
                </el-table-column>
                <el-table-column align="center" prop="lastCount" label="上月销售" width="140">
                </el-table-column>
                <el-table-column align="center" prop="last2Count" label="近两个月" width="140">
                </el-table-column>
                <el-table-column align="center" prop="last2Count" label="操作" width="120">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="success" size="small" @click="stockChart(scope.row)">出货图表</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
        <CStorageProductChangeChart ref="chartDialog"></CStorageProductChangeChart>
    </div>
</template>
<script>
import api from "@/api/api"
import { getRand } from "@/utils/random"
import { signGetParams } from '@/utils/sign'
import CStorageProductChangeChart from "./CStorageProductChangeChart.vue"
export default {
    name: 'StorageProduct',
    data() {
        return {
            loadingWarehouse: false,
            warehouses: [],
            others: {
                createTime: [],
                orderCreateTime: [],
            },
            queryParams: {
                platform:""
            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            storageProducts: [

            ],
            loading: false,
            StorageProduct: {}
        }
    },
    mounted: function() {
        this.getWarehouses();
    },
    components: {

        CStorageProductChangeChart
    },
    methods: {

        stockChart: function(row) {
            this.$refs['chartDialog'].showDialog({ id: row.id, variationName: row.variationName, productName: row.productName, skuCode: row.skuCode });
        },
        fitlerWarehouse: function(ware) {
            if (ware) {
                this.queryParams.warehouseId = ware.warehouseId;
            } else {
                this.queryParams.warehouseId = null;
            }
            this.getList();

        },
        getWarehouses: function() {
            var me = this;
            me.loadingWarehouse = true;

            me.$http.post("/merchant/getWarehouses.do", {}).then(response => {
                me.loadingWarehouse = false;
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;

                } else {
                    me.errorMessage(body.info);
                }

            }, response => {
                me.loadingWarehouse = false;
            });
        },
        exportData: function() {
            // if(!this.queryParams.warehouseId)
            // {
            //     this.errorMessage("请先选择仓库");
            //     return false;
            // }
            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/storageproduct/exportSells.do?";
            let params = this.queryParams;
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));

        },
        cbtime: function(value) {
            //创建时间
            if (value) {
                this.queryParams.btime = value[0];
                this.queryParams.etime = value[1];
            } else {
                this.queryParams.btime = "";
                this.queryParams.etime = "";
            }

        },
        cobtime: function(value) {
            //创建时间
            if (value) {
                this.queryParams.botime = value[0];
                this.queryParams.eotime = value[1];
            } else {
                this.queryParams.botime = "";
                this.queryParams.eotime = "";
            }

        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {

            this.queryParams = {};
            this.getList();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;

            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/storageproduct/statisSells.do", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;

                    me.storageProducts = body.obj.list;
                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }
    }
}
</script>